<template>
  <div class="border-wrap">
    <div class="function">
      <div class="up" v-if="index != 0"  @click.stop="upGoPro"><Icon type="ios-arrow-dropup" size="24" color="#000"/></div>
      <div class="down" v-if="index !== list.length - 1" @click.stop="downGoPro"><Icon type="ios-arrow-dropdown" size="24" color="#000"/></div>
      <div class="close" @click.stop="delGoPro"><Icon type="ios-close-circle-outline" size="24" color="#000"/></div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "bordWrap",
        props:{
          index:{
              type:Number,
              default:-1
          },
          list:{
              type:Array,
              default:()=>[]
          }
        },
        methods:{
            upGoPro(){
                this.$emit('upGoPro')
            },
            downGoPro(){
                this.$emit('downGoPro')
            },
            delGoPro(){
                this.$emit('delGoPro')
            }
        }
    }
</script>

<style scoped lang="less">
  .border-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    border:2px solid #2A75ED;
    box-sizing: border-box;
    .function{
      background: #fff;
      position: absolute;
      width: 38px;
      right: -14px;
      top: -2px;
      z-index: 1000;
      -webkit-transform: translate(100%, 0);
      transform: translate(100%, 0);
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
      margin-left: 14px;
      text-align: center;
      &>div{
        padding: 5px;
      }
    }
  }
</style>